<template>
    <div>
        <div>
            <el-form ref="searchForm" :inline="true" :model="condition.search" label-suffix="" label-width="100px"
                     label-position="left" size="small">
                <el-row>
                    <el-col :span=6>
                        <el-form-item label="美食分类" prop="foodCategory">
                            <el-select v-model="condition.search.foodCategory"
                                       placeholder="美食分类">
                                <el-option
                                    v-for="item in shop_categories"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="关键词" prop="q">
                            <el-input v-model="condition.search.q"
                                      placeholder="关键词"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item>
                            <el-button type="primary" v-on:click="getData">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="showAddDialog">新增</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="reset">重置</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" @click="showFlag = !showFlag">切换显示</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-row v-for="item in rowsData" :key="item.id" v-if="type === 'IMAGE'" type="flex">
            <el-col :span="4" v-for="col in item.cols" :key="item.id">
                <el-image :src="col.url" fit="cover" :preview-src-list="imgUrls"
                          class="pic"></el-image>
                <div v-if="showFlag">
                    <div style="margin-top: -5px; text-align: center;">
                        <el-link type="primary"
                                 :href="col.url"
                                 target="_blank">
                            {{ col.name }}
                        </el-link>
                        <el-button size="mini" type="success" icon="el-icon-edit" circle
                                   @click="showUpdateDialog(col)"></el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete" circle
                                   @click="onDelete(col)"></el-button>
                    </div>
                    <div>
                        <el-tag size="small" type="danger" @click="clickTagSearch(col.foodCategory)">
                            {{ col.foodCategory }}
                        </el-tag>
                        <el-tag
                            v-for="tag in col.styleTagList"
                            :key="tag"
                            @click="clickTagSearch(tag)"
                            size="small">
                            {{ tag }}
                        </el-tag>
                        <el-tag
                            v-for="tag in col.contentTagList"
                            :key="tag"
                            type="success"
                            @click="clickTagSearch(tag)"
                            size="small">
                            {{ tag }}
                        </el-tag>
                    </div>
                </div>
            </el-col>
        </el-row>

        <el-row v-for="item in rowsData" :key="item.id" v-if="type === 'VIDEO'" :gutter="20">
            <el-col :span="6" v-for="col in item.cols" :key="item.id">
                <video :src="col.url" controls style="width: 100%; height: 100%; object-fit:fill"></video>
                <div v-if="showFlag">
                    <div style="margin-top: -5px; text-align: center;">
                        <el-link type="primary"
                                 :href="col.url"
                                 target="_blank">
                            {{ col.name }}
                        </el-link>
                        <el-button size="mini" type="success" icon="el-icon-edit" circle
                                   @click="showUpdateDialog(col)"></el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete" circle
                                   @click="onDelete(col)"></el-button>
                    </div>
                    <div>
                        <el-tag size="small" type="danger" @click="clickTagSearch(col.foodCategory)">
                            {{ col.foodCategory }}
                        </el-tag>
                        <el-tag
                            v-for="tag in col.styleTagList"
                            :key="tag"
                            @click="clickTagSearch(tag)"
                            size="small">
                            {{ tag }}
                        </el-tag>
                        <el-tag
                            v-for="tag in col.contentTagList"
                            :key="tag"
                            type="success"
                            @click="clickTagSearch(tag)"
                            size="small">
                            {{ tag }}
                        </el-tag>
                    </div>
                </div>
            </el-col>
        </el-row>

        <el-pagination
            background
            small
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="condition.page"
            :page-sizes="[24, 48, 96, 192]"
            :page-size.sync="condition.rows"
            layout="sizes, prev, pager, next"
            :total.sync="condition.total">
        </el-pagination>
        <el-dialog :title=addOrUpdateDialogTitle width="40%" :visible.sync="addOrUpdateDialogVisible">
            <el-form :model="addOrUpdateForm" label-width="120px" size="small">
                <el-form-item label="菜系分类">
                    <el-select v-model="addOrUpdateForm.foodCategory"
                               placeholder="美食分类">
                        <el-option
                            v-for="item in shop_categories"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="addOrUpdateForm.type"
                               placeholder="类型">
                        <el-option label="视频"
                                   value="VIDEO"></el-option>
                        <el-option label="图片"
                                   value="IMAGE"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="addOrUpdateForm.name"
                              placeholder="名称"></el-input>
                </el-form-item>
                <el-form-item label="描述信息">
                    <el-input v-model="addOrUpdateForm.description"
                              placeholder="描述信息"></el-input>
                </el-form-item>
                <el-form-item label="素材来源">
                    <el-select v-model="addOrUpdateForm.source"
                               placeholder="素材来源">
                        <el-option label="点评"
                                   value="DP"></el-option>
                        <el-option label="其它"
                                   value="OTHERS"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="风格标签" v-if="style_tags.length > 0">
                    <el-tag
                        v-for="item in style_tags"
                        :key="item.label"
                        :type="item.type"
                        size="small"
                        @click="clickStyleTag(item)"
                        :effect="item.effect">
                        {{ item.label }}
                    </el-tag>
                </el-form-item>
                <el-form-item label="内容标签" v-if="content_tags.length > 0">
                    <el-tag
                        v-for="item in content_tags"
                        :key="item.label"
                        :type="item.type"
                        size="small"
                        @click="clickContentTag(item)"
                        :effect="item.effect">
                        {{ item.label }}
                    </el-tag>
                </el-form-item>
                <el-form-item label="门店名称">
                    <el-input v-model="addOrUpdateForm.shopName"
                              placeholder="门店名称"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addOrUpdateDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="addOrUpdateConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {addGallery, deleteGallery, getGalleryByPage, getParamValue, updateGallery} from '@/api/api'

export default {
    name: "Gallery",
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 24,
                total: 0,
                search: {}
            },
            // 表格数据
            tableData: [],
            // 新增或者编辑对话框显示
            addOrUpdateDialogVisible: false,
            // 标题
            addOrUpdateDialogTitle: '新增',
            // 新增或者编辑对话框表单
            addOrUpdateForm: {},
            // 选中行
            selectedRow: {},

            rowsData: [],
            imgUrls: [],
            colsSize: 6,

            style_tags: [],
            content_tags: [],

            // 门店分类
            shop_categories: [],

            // 切换显示
            showFlag: true,
        }
    },
    // 这里定义需要父组件传过来的东西
    props: {
        type: {
            type: String,
            default: 'IMAGE'
        },
    },
    watch: {
        type: function (val, oldVal) {
            if (val) {
                this.type = val;
            }
        }
    },
    methods: {
        clickTagSearch(tag) {
            this.$set(this.condition.search, "q", tag)
            this.getData();
        },
        clickStyleTag(item) {
            if (item.effect === 'plain') {
                item.effect = 'dark'
            } else {
                item.effect = 'plain'
            }
            let ss = [];
            this.style_tags.forEach((item, index, arr) => {
                if (item.effect === 'dark') {
                    ss.push(item.label);
                }
            })
            if (ss.length > 0) {
                this.addOrUpdateForm.styleTags = ss.join(",");
            }
        },
        clickContentTag(item) {
            if (item.effect === 'plain') {
                item.effect = 'dark'
            } else {
                item.effect = 'plain'
            }
            let ss = [];
            this.content_tags.forEach((item, index, arr) => {
                if (item.effect === 'dark') {
                    ss.push(item.label);
                }
            })
            if (ss.length > 0) {
                this.addOrUpdateForm.contentTags = ss.join(",");
            }
        },
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            return '';
        },
        handleSizeChange(val) {
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        // 格式布尔值
        formatBoolean: function (row, column, cellValue) {
            if (cellValue) {
                return "是";
            } else {
                return "否";
            }
        },
        formatType: function (row, column, cellValue) {
            if (cellValue == 'VIDEO') {
                return "视频";
            } else if (cellValue == 'IMAGE') {
                return "图片";
            } else {
                return "未知";
            }
        },
        formatSource: function (row, column, cellValue) {
            if (cellValue == '点评') {
                return "DP";
            } else if (cellValue == '其它') {
                return "OTHERS";
            } else {
                return "未知";
            }
        },
        showAddDialog: function () {
            this.addOrUpdateDialogTitle = '新增';
            this.addOrUpdateDialogVisible = true;
            this.addOrUpdateForm = {};
        },
        showUpdateDialog: function (row) {
            this.addOrUpdateDialogTitle = '编辑';
            this.addOrUpdateDialogVisible = true;
            this.selectedRow = row;
            // 深拷贝
            this.addOrUpdateForm = Object.assign({}, row);

            // 风格标签初始化
            this.style_tags.forEach((item, index, arr) => {
                item.effect = 'plain'
            })
            // 风格标签赋值
            if (this.addOrUpdateForm.styleTags) {
                let tt = this.addOrUpdateForm.styleTags.split(",");
                tt.forEach((item, index, arr) => {
                    for (let i = 0; i < this.style_tags.length; i++) {
                        if (this.style_tags[i].label == item) {
                            this.style_tags[i].effect = 'dark';
                            break;
                        }
                    }
                })
            }

            // 内容标签初始化
            this.content_tags.forEach((item, index, arr) => {
                item.effect = 'plain'
            })
            // 内容标签赋值
            if (this.addOrUpdateForm.contentTags) {
                let tt = this.addOrUpdateForm.contentTags.split(",");
                tt.forEach((item, index, arr) => {
                    for (let i = 0; i < this.content_tags.length; i++) {
                        if (this.content_tags[i].label == item) {
                            this.content_tags[i].effect = 'dark';
                            break;
                        }
                    }
                })
            }
        },
        reset: function () {
            this.$refs['searchForm'].resetFields();
        },
        exportExcel: function () {
            this.GLOBAL.exportExcel('#mainTable', '数据.xlsx');
        },
        add: function () {
            addGallery(this.addOrUpdateForm).then(data => {
                if (data.respCode == 1000) {
                    this.addOrUpdateDialogVisible = false;
                    this.getData();
                }
            });
        },
        update: function () {
            updateGallery(this.addOrUpdateForm).then(data => {
                if (data.respCode == 1000) {
                    this.addOrUpdateDialogVisible = false;
                    this.getData();
                }
            });
        },
        onDelete: function (row) {
            this.$confirm('请确认是否删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteGallery({id: row.id}).then(data => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        addOrUpdateConfirm: function () {
            if (this.addOrUpdateDialogTitle == '新增') {
                this.add();
            } else if (this.addOrUpdateDialogTitle == '编辑') {
                this.update();
            }
        },
        // 获取表格数据
        getData: function () {
            this.condition.search.type = this.type;
            this.condition.search.dp5picFlag = false;
            this.condition.search.category = 'FOOD';
            getGalleryByPage(this.condition).then(data => {
                this.tableData = data.body.rows;
                this.condition.total = data.body.total;

                this.tableData.forEach((item, index, arr) => {
                    this.imgUrls.push(item.url);
                })

                if (this.type == 'VIDEO') {
                    this.colsSize = 4;
                }
                this.rowsData = this.GLOBAL.convertArray(this.tableData, this.colsSize);
            });
            this.getStyleTags();
            this.getContentTags();
            this.getShopCategories();
        },
        // 获取风格标签数组
        getStyleTags() {
            if (this.style_tags.length > 0) {
                return;
            }
            this.style_tags = [];
            getParamValue('gallery_style_tags').then(data => {
                let ss = data.body;
                if (ss) {
                    let tt = ss.split(",");
                    tt.forEach((item, index, arr) => {
                        this.style_tags.push(
                            {
                                type: '',
                                label: item,
                                effect: 'plain'
                            }
                        )
                    })
                }
            })
        },
        // 获取内容标签数组
        getContentTags() {
            if (this.content_tags.length > 0) {
                return;
            }
            this.content_tags = [];
            getParamValue('gallery_content_tags').then(data => {
                let ss = data.body;
                if (ss) {
                    let tt = ss.split(",");
                    tt.forEach((item, index, arr) => {
                        this.content_tags.push(
                            {
                                type: 'success',
                                label: item,
                                effect: 'plain'
                            }
                        )
                    })
                }
            })
        },
        // 获取门店分类
        getShopCategories() {
            if (this.shop_categories.length > 0) {
                return;
            }
            this.shop_categories = [];
            getParamValue('food_shop_category').then(data => {
                let ss = data.body;
                if (ss) {
                    let tt = ss.split(",");
                    tt.forEach((item, index, arr) => {
                        this.shop_categories.push(
                            {
                                value: item,
                                label: item,
                            }
                        )
                    })
                }
            })
        }
    },
    created() {
        this.getData();
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}

.pic {
    width: 200px;
    height: 150px;
}

.el-button--mini.is-circle {
    padding: 0px !important;
}

.el-tag {
    cursor: default !important;
}

.el-tag:hover {
    cursor: pointer !important;
}
</style>
